<template>
    <div class="globalSearch">
        <!-- 报表检索条件组件 -->
        <ReportSearch :loading="loading" :searchFormDatas="searchFormDatas" v-model:searchForm="searchForm"
            @handleSearchForm="handleSearchForm" @handleResetForm="handleResetForm" />
    </div>
</template>

<script setup>
import { ref, reactive, watch, onMounted } from 'vue';
import { ElMessage } from 'element-plus';

import * as local from '@/utils/cache/localStorage';

import { getYesterday, getCurYearMonth } from '@/utils/date';
import { apiFn, deepCopy, getObjectSpan, exportReportFile } from '@/utils/utilFns';

import ReportSearch from '@/components/reportSearch/index.vue';

// 默认表单数据
const defaultSearchForm = {
    orgIds: local.getItem('defaultOrgIds'),
    timeFrame: [getYesterday(), getYesterday()],
	vehicle_model: "",
	vehicle_number: [],
	fault_level: [],
	fault_type: [],
	driver_mode: [],
	product_mode: '',
	versions: [],
	fault_name: ""
};

// 加载状态
const loading = ref(false);

// 表单数据
const searchForm = reactive(deepCopy(defaultSearchForm));

// 检索条件数据
const searchFormDatas = ref([
    {
        id: 0,
        type: 'selectTree',
        label: '所属组织',
        prop: 'orgIds',
        options: [],
        api: () => { },
        placeholder: '请选择所属组织',
        rules: [{ required: true, message: '请选择所属组织', trigger: ['blur, change'] }]
    },
    {
        id: 1,
        type: 'selectMulti',
        label: '所属模块',
        prop: 'fault_type',
        options: [],
        clearable: false,
        api: () => { },
        placeholder: '请选择',
    },
    {
        id: 2,
        type: 'dateRangePicker',
        prop: 'timeFrame',
        label: '时间范围',
        options: [],
        api: () => { },
        placeholder: '请选择时间范围',
        rules: [{ required: true, message: '请选择时间范围', trigger: ['change'] }]
    },
    {
        id: 3,
        type: 'selectModel',
        prop: 'vehicleModel',
        label: '设备型号',
        options: [],
        api: () => { },
        placeholder: '请选择',
    },
    {
        id: 4,
        type: 'selectNumber',
        prop: 'vehicleNumber',
        label: '设备编号',
        options: [],
        api: () => { },
        placeholder: '请选择',
    },
    {
        id: 5,
        type: 'input',
        prop: 'fault_name',
        label: '故障名称',
        api: () => { },
        placeholder: '请输入故障名称',
    },
    {
        id: 6,
        type: 'selectMulti',
        prop: 'fault_level',
        label: '故障等级',
        api: () => { },
        placeholder: '请选择',
    },
    {
        id: 7,
        type: 'select',
        prop: 'product_mode',
        label: '生产模式',
        api: () => { },
        placeholder: '请选择',
    },
    {
        id: 8,
        type: 'selectMulti',
        prop: 'versions',
        label: '程序版本',
        api: () => { },
        placeholder: '请选择',
    },
    {
        id: 9,
        type: 'selectMulti',
        prop: 'driver_mode',
        label: '驾驶模式',
        api: () => { },
        placeholder: '请选择',
    }
]);

// 所属组织变化监听
watch(() => searchForm.orgIds, () => {
    searchForm.vehicleModel = '';
    searchForm.vehicleNumber = [];
    searchForm.shiftType = '-1';
    getShiftOptions();
    getEquipModelOptions();
    getEquipNumberOptions();
});

// 设备型号变化监听
watch(() => searchForm.vehicleModel, () => {
    searchForm.vehicleNumber = [];
    getEquipNumberOptions();
});

// 查询
const handleSearchForm = (type) => {
    if (loading.value) return;

    if (type === 'search') {
        Object.keys(defaultPageInfo).forEach(key => {
            if (key in pageInfo) {
                pageInfo[key] = defaultPageInfo[key];
            }
        })
    }
    getTableColumn();
};

// 重置
const handleResetForm = () => {
    Object.keys(searchForm).forEach(key => {
        if (key in defaultSearchForm) {
            searchForm[key] = defaultSearchForm[key];
        }
    });

    Object.keys(defaultPageInfo).forEach(key => {
        if (key in pageInfo) {
            pageInfo[key] = defaultPageInfo[key];
        }
    });

    tableTitle.value = defaultTitle;
    tableColumnData.value = [];
    tableData.value = [];
};

</script>

<style lang="scss" scoped>
.globalSearch{
    padding: 15px 0px;
    :deep(.tableSearch) {
        .el-form .el-form-item{
            margin: 0px 20px 12px 0px;
        }
    }   
}
</style>